<template>
    <div class="wrap">
            <!-- 查询条件，默认在页面加载后，组件会触发一次queryHandle事件 -->
            <commonQuery @queryHandle="loadData" :allowAllFieldList="['categoryType']"></commonQuery>

            <div style="color: rgb(255, 0, 0);
                        font-size: 13px;
                        margin-left: 2px;
                        margin-bottom:0px;">* 参与参评的信息以用户最后一次提交信息为准，用户保存数据不参与参评</div>

            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">拟参评符合总人数{{totalPeople}}人</div>
            </div>

            <div class="dataContent">
                <div class="chart">
                    <div class="operation">
                        <div>5大领域人员占比统计（共{{totalPeople}}人）</div>
                        <a @click='detail()'>详情 》</a>
                    </div>
                    <div id="chartContainer" style="height:400px;width:100%;"></div>
                </div>
                <div class="colorDescription">

                </div>
            </div>
            <div class="notData">
                暂无数据
            </div>
    
    </div>
</template>

<script>
import commonQuery from "./CommonQuery";
import { participationFindPassRatePost} from '@/service/api'
import Qs from 'qs'

export default {
    data(){
        return {
            formQuery:"",
            totalPeople:0,

            myCharts:"",
        }
    },
    components:{
        commonQuery
    },
    mounted(){

    },
    methods:{
        loadData(queryObj){
            var that = this;

            queryObj.hasPass = true;  // 是否符合条件： true 符合，false 不符合 null 全部

            this.formQuery = queryObj;

            participationFindPassRatePost(Qs.stringify(queryObj)).then(res => {
                if(res.code == 200){

                    that.totalPeople = parseInt(res.data.totalCount);

                    var xLabel = new Array();
                    var valueList = new Array();

                    for(var i=0;i<res.data.data.length;i++){
                        xLabel.push(res.data.data[i].name);

                        let value = (res.data.data[i].count/that.totalPeople)*100;
                        value = Math.round(value*100)/100; // 四舍五入
                        valueList.push(value);
                        // valueList.push(res.data.data[i].rate);

                    }
                    if(that.totalValue <= 0){
                        document.querySelector(".dataContent").style.display = 'none';
                        document.querySelector(".notData").style.display = 'flex';
                    }else{
                        document.querySelector(".dataContent").style.display = 'flex';
                        document.querySelector(".notData").style.display = 'none';
                        that.updateChart(xLabel,valueList);
                    }

                }
            });
        },
        updateChart:function(xLabel,valueList,){

            var that = this;
            // 基于准备好的dom，初始化echarts实例
            this.myCharts = this.$echarts.init(document.getElementById('chartContainer'));
            var option = {
                tooltip:{
                    formatter:"{b}占比：{c}%"
                },
                // 坐标区域
                grid:{
                    // top:'10%',
                    left:'50px',  // 图表与容器距离
                    right:'12px',
                },
                xAxis: {
                    type: 'category',
                    data: xLabel,
                    axisLabel: {  // Y轴刻度标签样式
                        show: true,  
                        interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                        color:'#999',        // 标签颜色
                    },
                    axisLine: {   // Y轴字体、线颜色
                        lineStyle: {
                            color: '#efefef',
                        }
                    }, 
                },
                yAxis: {
                    max:100,
                    min:0,
                    type: 'value',
                    axisLabel: {  // Y轴刻度标签样式
                        show: true,  
                        margin:20,
                        formatter: '{value}%',  // 标签格式
                        interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                        color:'#999',        // 标签颜色
                    },
                    axisLine: {   // Y轴字体、线颜色
                        lineStyle: {
                            color: '#efefef',
                            fontSize:14,
                        }
                    }, 
                    splitLine:{  // y轴网格区域分隔线样式
                        show:true,
                        lineStyle:{ // 样式
                            color:'#efefef',
                        }
                    }
                },
                series: [{
                    // name: '占比',
                    data:valueList,
                    itemStyle:{     // 柱子样式
                            
                        // color:"#c23531",   // 每个柱子颜色
                        color:function(params){ 
                            var colorList = ['#38C1CF','#496BC3', '#596BA6', '#3896A1', '#5454B2'];
                            return colorList[params.dataIndex];
                        },
                    },
                    barWidth:'40%',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter(value){
                                let pNum = (value.value/100) * that.totalPeople;  // 四舍五入
                                return Math.round(pNum*100)/100 + "人";
                            }
                        }
                    },
                    showBackground:true, // 显示柱子背景
                    backgroundStyle: {   // 柱子背景样式
                        color: '#fff0',
                        borderColor:'#e4e4e4',
                        borderWidth:1,
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myCharts.setOption(option);

        },
        detail:function(){
            this.$router.push({name:'ListOfMatchingPeople',query:this.formQuery});
        }
    }
    
}
</script>

<style scoped>

.wrap *{
    z-index: 1;
}

.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 14px 0px;
    border-top: solid 1px #f3f3f3;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;

}


.dataContent{
    padding: 60px 0px;
    display: none;
}
.dataContent>div{
    width: 80%;
}
.dataContent>div .operation{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}
.dataContent>div .operation>a{
    font-size: 15px;
    color: #31478F;
    cursor: pointer;
}

.notData{
    display: none;
    color: gray;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

</style>